<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小球左右摆动加载效果</title>

  <style>
    .newtons-cradle {
      --uib-size: 50px;
      --uib-speed: 1.2s;
      --uib-color: #474554;
      position: relative;
      top: 200px;
      left: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--uib-size);
      height: var(--uib-size);
    }

    .newtons-cradle__dot {
      position: relative;
      display: flex;
      align-items: center;
      width: 25%;
      height: 100%;
      transform-origin: center top;
    }

    .newtons-cradle__dot::after {
      content: '';
      display: block;
      width: 100%;
      height: 25%;
      border-radius: 50%;
      background-color: var(--uib-color);
    }

    .newtons-cradle__dot:first-child {
      animation: swing var(--uib-speed) linear infinite;
    }

    .newtons-cradle__dot:last-child {
      animation: swing2 var(--uib-speed) linear infinite;
    }

    /*
      ease: 默认值，表示动画在中间加速，在结束时减速
      linear: 匀速
      ease-in: 先缓慢，后加速
      ease-out: 先快，后减速
      ease-in-out: 先缓慢，随后加速，最后减速
     */
    @keyframes swing {
      0% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
      }

      25% {
        transform: rotate(70deg);
        animation-timing-function: ease-in;
      }

      50% {
        transform: rotate(0deg);
        animation-timing-function: linear;
      }

    }

    @keyframes swing2 {
      0% {
        transform: rotate(0deg);
        animation-timing-function: linear;
      }

      25% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
      }

      50% {
        transform: rotate(-70deg);
        animation-timing-function: ease-in;
      }

    }

  </style>
</head>

<body>
  <div class="newtons-cradle">
    <div class="newtons-cradle__dot"></div>
    <div class="newtons-cradle__dot"></div>
    <div class="newtons-cradle__dot"></div>
    <div class="newtons-cradle__dot"></div>
  </div>
</body>

</html>